<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>充值 </title>
    <link rel="stylesheet" href="__TEMPLATE__/webfile/main.css">
    <script type="text/javascript" src="__TEMPLATE__/sysme/js/jquery-1.9.1.min.js"></script>
    <script src="__SYSMET__/lib/layer/2.4/layer.js" type="text/javascript"></script>
    <style>
        .cz_header {
            width: 96%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            overflow: hidden;
            padding: 10px 2%;
        }

        .cz_header>div {
            float: left;
            height: 30px;
        }

        .info_money {
            width: 96%;
            padding: 0 2%;
        }

        .info_money p {
            height: 30px;
            line-height: 30px;
            width: 100%;
            margin-bottom: 15px;
        }

        .info_money div span {
        	width:80px;
        	display:block;
            height: 35px;
            text-align: center;
            float: left;
            border: 1px solid #ccc;
            line-height:35px;
            border-radius: 3px;
            background:#e6e6e6;
           
            margin:15px 25px 0;
        }
        /*.info_money div span:nth-child(4n){margin-right:0;}*/

        .info_money div .add_bg {
            background: #f00;
            color: #fff;
        }

        .zffs {
        	padding-top:40px;
            width: 100%;
            height: auto;
            overflow: hidden;
            padding-bottom:10px;
        }

        .zffs li {
        	width:300px;
            height: 50px;
            float: left;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding:4px 10px;
            margin:10px 43px;
            position:relative;
            overflow: hidden;
        }
        .zffs li i{width:0;height:0;position:absolute;border:35px solid transparent;border-bottom:30px solid red;bottom:0;right:-36px;display:none;}
        .zffs li strong{display:none;position:absolute;font-size:16px;bottom:0;right:4px;color:#fff;z-index: 2;font-weight: normal;}
        .zffs .select1{
            border: 1px solid red;
        }
        .zffs li a {
            display: block;
            height: 100%;
            overflow: hidden;
            text-decoration: none;
            color: #000;
        }

        .zffs li a p {
            float: left;
            height: 35px;
            font-size: 14px;
            font-weight: bold;
        }
        .zffs li a p span{display:block;}

        .zffs li a img {
            margin-top: 7px;
            margin-right: 6px;
            width: 30px;
            display: block;
            float: left;
        }

        .pay_Method {
            width: 100%;
            height: auto;
            border-top: 1px solid #ccc;
            overflow: hidden;
        }

        .pay_Method .left {
            width: 20%;
            float: left;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
        }

        .pay_Method .left li {
            height: 42px;
            padding-bottom: 2px;
            border-bottom: 1px solid #ccc;
            padding-left: 10px;
        }



        .pay_Method .left li h2 {
            height: 25px;
            line-height: 25px;
        }

        .pay_Method .right {
            width: 80%;
        }

        .pay_Method .right>div {
            height: auto;
            border-right: 1px solid #ccc;
            width: 100%;
        }

        .pay_Method .right>div form {
            margin: 0 auto;
        }

        .pay_Method .right>div form div {
            margin: 0 auto;
        }
        .wxts p {
            color: #999;
            font-size: 12px;
            line-height: 20px;
            text-align: left;
        }
        a:hover{text-decoration: none;}
    </style>
</head>

<body cz-shortcut-listen="true">
<div class="header">
    <div class="main main_btm_border">
        <div class="left logo">
            <a href="{:url('index/home')}" class="logo-link">
						<span class="logo_image">
						</span>
                <style>
                    .logo_image {
                        background-image:url("__ATTACHMENT__/{$logo.logoimg}")!important
                    }
                </style>
            </a>
        </div>
        <div class="right login_and_userinfo_1">
            <div class="login_header">
						<span class="welcome">
						</span>
                <div class="mobile_download" style="cursor:pointer">
                    <i class="iconfont">
                        
                    </i>
                    <i class="iconfont">
                        
                    </i>
							<span class="">
								手机app下载
							</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="model_2" class="model_2" style="display:none">
    <div class="model_header">
        <h1>
            温馨提醒
        </h1>
    </div>
    <div class="model_body">
				<span id="model_content">
				</span>
    </div>
    <div class="foot_succ">
        <a onclick="jQuery.modal.close()" class="btn btn-default btn-radius">
            确定
        </a>
    </div>
</div>
<div class="main usercenter">
    <div class="user_topup">
        <div class="user_menu left">
            <h2>会员中心</h2>
            <ul>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/index')}">个人中心</a>
                </li>
                <li class="hover"><i class="iconfont"></i>
                    <a class="user_goto_finance" href="{:url('user/recharge')}">财务中心</a>
                </li>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/callRecord')}">交易记录</a>
                </li>
                <!-- <li><i class="iconfont"></i><a href="{:url('user/detail')}">详细设定</a></li> -->
                <li><i class="iconfont"></i>
                    <a href="{:url('user/peilvdetail')}">赔率详情</a>
                </li>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/message')}">信息公告</a>
                </li>
                 <li><i class="iconfont"></i><a href="{:url('user/djsm')}">等级说明</a></li>
            </ul>

            <h2>代理中心</h2>
            <ul>
                <li><i class="iconfont"></i>
                    <a class="user_goto_finance" href="{:url('user/dlCentent')}">代理说明</a>
                </li>
                {if($f.dl==1)}
                <li><i class="iconfont"></i>
                    <a href="{:url('user/dailibaobiao')}">代理报表</a>
                </li>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/xiajibaobiao')}">下级报表</a>
                </li>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/xiajikaihu')}">下级开户</a>
                </li>
                <!--<li><i class="iconfont"></i>
                    <a href="{:url('user/xiajiguanli')}">下级管理</a>
                </li>-->
                <li><i class="iconfont"></i>
                    <a href="{:url('user/touzhumingxi')}">投注明细</a>
                </li>
                <li><i class="iconfont"></i>
                    <a href="{:url('user/jiaoyimingxi')}">交易明细</a>
                </li>
                {else/}
                <li><i class="iconfont"></i>
                    <a href="{:url('user/shenqing')}">代理申请</a>
                </li>
                {/if}
            </ul>
        </div>
        <div class="user_right right" style="height:;">
            <div class="user_main">
                <div class="user_header">
                    <div class="user_header_nav">
                        <ul>
                            <li class="hover">
                                <a href="{:url('user/recharge')}">充值</a>
                            </li>
                            <li>
                                <a href="{:url('user/drawMoney')}">提现</a>
                            </li>
                            <li>
                                <a href="{:url('user/rechargeRecord')}">充值记录</a>
                            </li>
                            <li>
                                <a href="{:url('user/drawMoneyRecord')}">提现记录</a>
                            </li>
                            <li>
                                <a href="{:url('user/other')}">其他记录</a>
                            </li>
                            <li style="background:#fff;float:right;height:36px;margin-top:4px;margin-right:4px;font-size:12px;line-height:36px;padding:0 4px;">
                                <span style="margin-right:10px;">账&nbsp;&nbsp;号：{$user_all.username}</span>
                                <span >金额：<i style="color:red;font-style: normal">{$user_all.je}</i></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="user_body" style="padding:0;">
                	<ul class="zffs" id="pay_method">
                        {volist name="method_list" id="v" key="k"}
                        <li  data-id="{$v['id']}" class="{if(1==$k)} select1 {/if}">
                            <a href="javascript:;">
                                <img src="__ATTACHMENT__/{$v.logo}" />
                                <p>
                                	<span style="margin:4px 0;">{$v.name}</span>
                                    <span style="font-size:12px;color:#666;font-weight: normal;">{$v.remark}</span>
                                </p>
                            </a>
                            <i {if(1==$k)} style="display:block;" {/if}></i>
                            <strong {if(1==$k)} style="display:block;" {/if}>√</strong>
                        </li>
                        {/volist}
                    </ul>
                     <div style="margin:50px 0 20px;height:40px;" >
                        <a style="display:block;color:#fff;font-size:20px;text-align:center;border-radius:4px;height:45px;width:265px;line-height:45px;background:#e94335;margin:0 auto;font-weight: bold;" href="javascript:;" onclick="goNext()">下一步</a>
                      </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#pay_method').children('li').click(function() {
        $('#pay_method i').hide();
        $('#pay_method strong').hide();
        $('#pay_method').children('li').removeClass('select1');
        $(this).addClass('select1');
        $(this).children('i').show();
        $(this).children('strong').show();
    });
    function goNext(){
        var id = $('.select1').data('id');
        window.location = "{:url('index/user/rechargeDetail')}"+'?id='+id;
    }
</script>
</body>
